﻿/**
 * jQuery twiImageGrid plugin
 * @author: feitianxinhong  http://xuzhihong1987.blog.163.com/
 * @version 1.0.0
 * @create date:2015-09-12
 * @copyright (c) 2015 feitianxinhong/tyingsoft/twilight  http://www.tyingsoft.com
 * @example Visit 
 * @requires:  bootstrap-3.2.0或以上版本样式 
 *
 * ------------------------------------------------------------------
 * 编号    版本号      作者              修改日期       CSS修改内容
 * ------------------------------------------------------------------
 *  1      1.0.0     feitianxinhong    2015-09-12     创建文件
 *
 * ------------------------------------------------------------------
 */


(function ($) {
	var global = this;
	if (typeof Twi === 'undefined') {
		global.Twi = {
			emptyFn: function () { }
		};
	}
	Twi.global = global;

	/**
     * 随机数(返回几位随机数)
     * @len:随机数长度，default:4
     */
	function getRandom(len) {
		len = len || 4;
		return Math.floor(Math.pow(10, len) * Math.random());
	}

	/**
     * 生成twifor标签，如：twifor="bbar"
     * @value:标签值【推荐小写】
     * @quotes:引号类型，不填默认为双引号double;单引号：single;不要引号：none
     */
	function genTwiFor(value, quotes) {
		if (!value) return ' ';
		quotes = quotes || 'double';
		if (quotes == 'single') {
			return " " + twiFor + " = '" + value + "' ";
		}
		else if (quotes == 'none') {
			// return ' ' + twiFor + ' = ' + value + ' ';
			return twiFor + '=' + value; //jquery元素查找使用
		}
		return ' ' + twiFor + ' = "' + value + '" ';
	}

	/**
     * dft:default 默认值前缀
     */
	var
		twiPrefix = 'Twi'     //Twi前缀，踏影软件工作室Tyingsoft的通用前缀
		, twiFor = 'twifor'   //为了避免DOM属性与其他第三方插件冲突，使用twi自定义标签。w3c规范：DOM属性全小写

		//默认事件类型
		, dftEventType = 'click'

		//默认皮肤
		, dftSkin = 'default'

		,twiForBody ='imgGridBody'
	;


	Twi.ImageGrid = function (config) {
		var me = this;

		me.VERSION = '1.0.0';  //版本号 
		/**
         *默认配置项 
         */
		me.defaults = {
			renderTo: 'body',
			multiSelect: false,
			sortable: true,
			paging: false,
			autoLoad: false,
			layoutCls: 'col-sm-6 col-md-4 col-lg-3',  //布局样式，控制每行显示图片数量
			src:{
				fieldName:'FURL',  //图片路径字段
				renderer:null  //显示格式转换函数function(src,record)
			}
		};

		config = config || {};
		config = $.extend({}, me.defaults, config);

		me.config = config;
		me.id = "TwiImageGrid" + getRandom(); //随机ID  

		/**
		 * 参数处理
		 */
		if (typeof me.config.detail == 'undefined') {
			me.config.detail = {
				needShow: false
			}
		}
		else if (typeof me.config.detail == 'boolean' && me.config.detail) {			
			me.config.detail = {
				needShow: true,
				dock: 'bottom',  //默认放下面，以后扩展至 top、right、bottom、left,目前只支持bottom 
				fieldName: 'FNAME', //在图片下面显示一行字的字段配置
				renderer: null  //显示格式转换函数function(title,record),可实现灵活的HTML
			}
		}
		else if(typeof me.config.detail == 'string'){
			me.config.detail = {
				needShow: true,
				dock: 'bottom',
				fieldName: me.config.detail,
				renderer: null
			}
		}
		else if (typeof me.config.detail == 'object') {
			me.config.detail = $.extend({},  {
				needShow: true,
				dock: 'bottom',   
				fieldName: 'FNAME',
				renderer: null  
			},me.config.detail);
		}
		else {
			me.config.detail = {
				needShow: false
			}
		}


		var html = '<div id=' + me.id + '>';
		html += '<div class="row"' + genTwiFor(twiForBody) + '></div>';
		html += '</div>';
		$(me.config.renderTo).append(html);

		//是否自动加载数据
		if (me.config.autoLoad ) {
			var ajax = $.extend({}, config.ajax);
			delete ajax.success;
			ajax.success = function (twiReturn, textStatus, jqXHR) {
				//加载数据
				me.loadData(twiReturn.data);
				if (typeof config.ajax.success == 'function') {
					config.ajax.success(twiReturn, textStatus, jqXHR);
				}
			};
			Twi.Ajax(ajax);
		}
	}

	/**
     * 获取Id 【1.0.0+】
     */
	Twi.ImageGrid.prototype.getId = function () {
		return this.id;
	}

	/**
     * 加载数据【1.0.0+】
     * @data: 【必填参数】，record对象数组，一般传twi.data
     * @len:   数据条数，可选
     */
	Twi.ImageGrid.prototype.loadData = function (data, len) {
		if (!(data instanceof Array)) {
			return;
		}

		var tableSelf = this;
		var me = this;
		me._data = data;
		me._idFieldValues = [];

		//先清空数据
		var imgGridBody = $('#' + me.id).children('div['+genTwiFor(twiForBody,'none')+']');
		imgGridBody.empty();
		
		len = len || data.length;
		len = len > data.length ? data.length : len;
		
		/*添加数据行HTML*/
		for (var i = 0; i < len; i++) {
			var html = '<div class="' + me.config.layoutCls + '" rowIndex="' + i + '">'
			html += '<div class="twiImgThumbnail">';
			//图片略缩图
			var srcValue = data[i][me.config.src.fieldName];
		    if (me.config.src.renderer && typeof me.config.src.renderer == 'function') {
		    	srcValue = me.config.src.renderer(srcValue,data[i]);
			}
		    html += '<img src="' + srcValue + '"/>';
			//图片略缩图注释文字
		    if (me.config.detail && me.config.detail.needShow) {
		    	var detailValue = data[i][me.config.detail.fieldName];
		    	if (me.config.detail.renderer && typeof me.config.detail.renderer == 'function') {
		    		detailValue = me.config.detail.renderer(detailValue, data[i]);
		    	}
		    	html += '<div class="twiImgCaption">' + detailValue + '</div>';
		    }
			html += '</div>';
			html += '</div>';

			imgGridBody.append(html); //最后加载html
			if (typeof me.config.idField == 'string') {
				me._idFieldValues.push(data[i][me.config.idField]);
			}
		}

	}

})(window.jQuery);

